<template>
	<div class="wrap">
		<Gheader :showheader="data"></Gheader>
		<scroll class="wrapper">
			<div class="inwrap">
				<!--上方图片-->
				<div class="head-portrait">
					<span>图片</span>
				   <img :src="img" alt="" @click="bounced()"/>
				</div>
				
			</div>
		</scroll>
		<!--下方获取图片弹框-->
		<div class="bottom-bounced">
					<div>从手机相册里找</div>
					<div>拍照</div>
					<div @click="cancel()">取消</div>
				</div>
				
				<div  class="bgmask">
					
				</div>
	</div>
</template>

<script>
	import Scroll from "../../../../base/Scroll"
	import Gheader from "../person-center/Gheader"
	export default {
		name: "Headportrait",
		data() {
			return {
				data: {
					word: "头像 ",
					left: [true, false, false],
					right: [false, false, false, false, false, true],
					leftword: "",
					rightword1: "",
					rightword2: ""
				},
				img:""
			}
		},
		components: {
			Gheader,
			Scroll
		},
		methods:{
			bounced:function  () {
				$(".bottom-bounced").css("bottom","-1vh");
				$(".bgmask").css("display","block");
				console.log("点击");
				console.log(this.$route)
			},
			cancel:function  () {
				$(".bottom-bounced").css("bottom","-21.171vh");
				$(".bgmask").css("display","none");
				console.log("点击");
			}
		},
		created:function(){
		 this.img = this.$store.state.personInfor[0].login.userheader
		  
		}
	}
</script>

<style scoped>
	.wrap{
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
	}
	.wrapper{
		height: 90vh;
		overflow: hidden;
	}
	.inwrap{
		height: 90.2vh;
		text-align: center;
	}
	.inwrap{
		position: relative;
	}
	.head-portrait {
		width: 100%;
		height: 48.649vh;
		position: relative;
	}
	.head-portrait span{
		display:inline-block;
		width: 38.649vh;
		line-height: 38.649vh;
		background: white;
		font-size: 1.5rem;
		margin: 5vh 0;
		border-radius:50% ;
	}
	.head-portrait img{
		display: inline-block;
		width: 38.649vh;
		height: 38.649vh;
		position: absolute;
		top: 5vh;
		left: 50%;
		margin-left: -19.325vh;
		border: 1px solid #CCCCCC;
		border-radius: 50%;
	}
	.bottom-bounced{
		text-align: center;
		width: 100%;
		height: 21.171vh;
		position: fixed;
		/*bottom: 0;*/
		z-index: 11;
	}
	.bottom-bounced>div{
		background: white;
		height: 6.757vh;
		line-height:6.757vh ;
		font-size: 1.4rem;
		color: #4D4D4D;
		border-top:1px solid #CCCCCC;
	}
	.bgmask{
		display: none;
		width: 100%;
		height: 100vh;
		background: black;
		opacity: 0.5;
		position: absolute;
		top: -10vh;
		z-index: 10;
		}
		
</style>